<template>
  <div class="content">
    <van-notice-bar
      color="#1989fa"
      background="#ecf9ff"
      left-icon="info-o"
      text="设置个人标签，可以为你匹配志同道合的同学！"
    />
  </div>
  <van-cell-group>
    <van-field :value="tagsVal" placeholder="创建标签：" @change="onChange($event)" />
  </van-cell-group>
  <div style="padding: 12px">
    <van-button round block type="info" @click="updateUserTags"> 创建 </van-button>
  </div>
  <div class="search-tips">
      <span>你的标签</span>
      
    </div>

    <div class="tag">
      <van-tag
        class="space-8"
        v-for="(item, i) in userInfo.tags"
        :key="i"
        round
        closeable
        size="large"
        type="primary"
        color="#f8f8f8"
        text-color="#656565"
        @close="onClose($event, i)"
      >
        {{ item }}
      </van-tag>
    </div>
    <van-notify id="van-notify" />
</template>
<!-- <script>
  export default { name: 'Login' }
  </script> -->
<script setup>
import { ref,onMounted } from 'vue'
import { getCurrentUser,updateUser } from '../../api/user/userApi';
const tagsVal = ref('')
const userInfo=ref({})
const onChange = (event) => {
  // event.detail 为当前输入的值
  console.log(event.detail)
  tagsVal.value=event.detail
}
const getUserInfo= async()=>{
    const res=await getCurrentUser()
    console.log(res);
    userInfo.value=res.data
    userInfo.value.tags=JSON.parse(userInfo.value.tags)
    console.log("userInfo.value.tags",userInfo.value);
    

}
const updateUserTags=async()=>{
    console.log( 'tagsVal',tagsVal.value);
    console.log(userInfo.value.tags);
    
    userInfo.value.tags?.push(tagsVal.value)
    const requestObj={
        tags:JSON.stringify(userInfo.value.tags)
    }
    uni.showLoading({
        title:'请求中...',
        mask:true
    })
    const res=await updateUser(requestObj)
    console.log(res);
    tagsVal.value=''
    uni.hideLoading()
    uni.showToast({
        title:'成功',
        icon:'success'
    })
    
}
const onClose= async(e,index)=>{
    console.log(e,index);
    
    userInfo.value.tags= userInfo.value.tags.filter((item,i)=>{
        return i!==index
    })
    const requestObj={
        tags:JSON.stringify(userInfo.value.tags)
    }
    uni.showLoading({
        title:'请求中...',
        mask:true
    })
    const res=await updateUser(requestObj)
    console.log(res);
    tagsVal.value=''
    uni.hideLoading()
    uni.showToast({
        title:'成功',
        icon:'success'
    })
}
onMounted(()=>{
    getUserInfo()
})
</script>
<style scoped>
    .tag {
  padding-left: 16px;
}
.tag-temp-text {
  font-size: 14px;
  color: #c1c1c1;
}
.space-8 {
  margin-left: 8px;
}
/deep/.van-tag {
  margin-bottom: 8px;
}
.search-tips {
  height: 30px;
  line-height: 30px;
  padding: 0 8px 0 16px;
  font-size: 14px;
  color: #969799;
  display: flex;
  justify-content: space-between;
}
</style>
